<template>
	<uv-popup ref="popupRef" :round='15' :safeAreaInsetBottom='false' @change="change">
		<div class="userinfo-popup">
			<div class="userinfo-title uv-border-bottom"> 需要完善信息 </div>
			<div class="userinfo-content">
				<div class="userinfo-avatar">
					<button class="avatar-btn uv-reset-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image :src="file.getFileUrl(formData['avatar'])" mode="widthFix" />
						<div class="editing">
							<i class="icon-bianji iconfont"></i>
						</div>
					</button>
					<p class="tips">请上传头像</p>
				</div>

				<div class="userinfo-item uv-border-bottom">
					<input placeholder="请输入昵称" type="nickname" confirmType='done' v-model="formData['nickname']"></input>
				</div>

				<div class="userinfo-item uv-border-bottom" v-if="!formData['mobile']">
					<button class="uv-reset-button " open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber">
						<text class="input-placeholder">点击绑定手机号</text>
						<i class="iconfont icon-right"></i>
					</button>
				</div>
				<div class="userinfo-btn">
					<uv-button shape="circle" type="primary" text="确认" @click='onSubmit'></uv-button>
				</div>
			</div>
		</div>
	</uv-popup>
</template>

<script setup>
	import users from '@/api/users/index.js'
	import file from '@/utils/file/index.js'
	import tools from '@/utils/tools/index.js'
	import { useUserStore } from '@/store/user.js';
	import { ref, onMounted, nextTick, watch } from 'vue';

	const emits = defineEmits(['change']);

	const test = uni.$uv.test;
	const userStore = useUserStore();

	const popupRef = ref(null);
	const formData = ref({
		mobile: '',
		avatar: '',
		nickname: ''
	})

	async function onChooseAvatar({ detail }) {
		tools.loading();
		const { avatarUrl: path } = detail;
		const response = await file.uploadFile(path);
		uni.hideLoading();
		if (response['code'] === 200) {
			formData['value']['avatar'] = response['data']['path'];
		}
	}

	async function bindPhoneNumber(e) {
		const mobileCode = e.detail.code;
		if (!mobileCode) return;
		tools.loading();
		const response = await users.wx_bind_phone_number({ mobileCode });
		uni.hideLoading();
		if (response['code'] === 200) {
			userStore.init()
			tools.toast({
				title: '绑定成功',
				icon: 'success',
			})
		}
	}

	async function onSubmit() {
		const { avatar, nickname } = formData.value;

		const errors = [];
		!test.image(avatar) && errors.push({ tip: '请上传头像' });
		!test.rangeLength(nickname, [2, 16]) && errors.push({ tip: '请输入2-16位昵称' });
		if (errors['length']) {
			const error = errors[0];
			return tools.toast({ title: error['tip'] })
		}

		tools.loading();
		const response = await users.update({ avatar, nickname });
		uni.hideLoading();
		if (response['code'] === 200) {
			userStore.init()
			tools.toast({
				title: '更新成功',
				icon: 'success',
			})
			close();
		}
	}

	function open() {
		nextTick(() => {
			popupRef.value.open()
		})
	}

	function close() {
		nextTick(() => {
			popupRef.value.close();
		})
	}

	function change(e) {
		emits('change', e.show)
		if (!e.show) {}
	}

	watch(() => userStore.userInfo, (val) => {
		tools.formAssign(formData.value, val);
	}, { immediate: true })

	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.userinfo-popup {
		width: 600rpx;
		box-sizing: border-box;

		.userinfo-title {
			height: 96rpx;
			font-size: 36rpx;
			font-weight: 500;
			text-align: center;
			line-height: 96rpx;
		}

		.userinfo-content {
			padding: 24rpx 40rpx 40rpx;

			.userinfo-avatar {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.avatar-btn {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin: 12rpx 0;
					position: relative;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						vertical-align: top;
						background: $uv-bg-color;
					}

					.editing {
						background: $uv-primary;
						position: absolute;
						bottom: 0rpx;
						right: 4rpx;
						border-radius: 50%;
						width: 40rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.icon-bianji {
							color: #fff;
							font-size: 26rpx;
						}
					}
				}

				.tips {
					font-size: 24rpx;
					color: $uv-tips-color;
					text-align: center;
				}
			}

			.userinfo-item {
				height: 90rpx;
				margin-top: 40rpx;

				input {
					height: 90rpx;
					font-size: 30rpx;
				}

				button {
					width: 100%;
					height: 90rpx;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						font-size: 30rpx;
					}

					.icon-right {
						font-size: 24rpx;
						color: $uv-tips-color;
					}
				}
			}

			.userinfo-btn {
				margin-top: 60rpx;
			}
		}
	}
</style>